<template>
    <div>
        <div class="padding-xl">
          <el-row>
            <el-col :span="5">
              <el-button v-preventReClick type="primary" :inline="true" @click="createCSRFile">生成机器码文件</el-button>
            </el-col>
            <el-col :span="5">
              <el-button v-preventReClick type="primary" :inline="true" @click="uploadLicenseFile">导入并激活</el-button>
            </el-col>
          </el-row>

        </div>
        <div class="padding-left-xl text-xxl">产品授权信息</div>
        <el-menu :default-active="activeIndex" class="el-menu-demo " mode="horizontal" @select="handleSelect">
            <el-menu-item index="1">授权信息</el-menu-item>
            <el-menu-item index="2">使用情况</el-menu-item>
        </el-menu>
        <div v-if="activeIndex==1">
            <div class="fl padding-xl " style="width: 50%; ">
                <h3 class="text-xl">主要产品授权信息</h3>
                <div v-if="isActivate">
                    <div class="margin-tb-lg text-df">
                        <span>授权客户唯一标识：</span><span class="po-ab-min">{{authorization.licenseInfo.corporationName}}</span>
                    </div>
                    <div class="margin-tb-lg text-df">
                        <span>产品名称：</span><span class="po-ab-min">{{authorization.licenseInfo.productName}}</span>
                    </div>
                    <div class="margin-tb-lg text-df">
                        <span>版本号：</span><span class="po-ab-min">{{authorization.licenseInfo.productVersion}}</span>
                    </div>
                    <div class="margin-tb-lg text-df">
                      <span>授权有效期：</span>
                      <span v-if="authorization.licenseInfo.authType==0">无限制</span>
                      <span class="po-ab-min" v-else >
                        {{parseTime(authorization.licenseInfo.authDurationBegin, '{y}-{m}-{d}')}}
                        <span class="margin-right-sm margin-left-sm">至</span>
                        {{parseTime(authorization.licenseInfo.authDurationEnd, '{y}-{m}-{d}')}}</span>
                    </div>
                    <div class="margin-tb-lg text-df">
                      <span>IP授权：</span>
                      <span v-if="authorization.licenseInfo.authIpType==0">无限制</span>
                      <span v-else>
                        <el-table class="po-ab-min" :data="authorization.licenseInfo.ipRangeList" style="width:25%" >
                          <el-table-column label="序号" align="center" prop="no" width="90" />
                          <el-table-column label="IP地址" align="center" prop="ipAdderss" width="150" >
                            <template v-slot="scope">
                              <span v-if="scope.row.ipAddressMask==''">{{scope.row.ipAddress}}</span>
                              <span v-else>{{scope.row.ipAddress+"/"+scope.row.ipAddressMask}}</span>
                            </template>
                          </el-table-column>
                        </el-table>
                      </span>
                    </div>
                    <!--  -->
                    <!-- <div class="margin-tb-lg text-df">
                        <span>授权客户唯一标识</span><span class="po-ab-min">{{authorization.clientIdentify}}</span>
                    </div>
                    <div class="margin-tb-lg text-df">
                        <span>产品名称</span><span class="po-ab-min">{{authorization.name}}</span>
                    </div>
                    <div class="margin-tb-lg text-df">
                        <span>版本号</span><span class="po-ab-min">{{authorization.version}}</span>
                    </div>
                    <div class="margin-tb-lg text-df">
                        <span>版本号</span><span class="po-ab-min">{{authorization.version}}</span>
                    </div>
                    <div class="margin-tb-lg text-df">
                        <span>授权有效期</span>
                        <span class="po-ab-min">{{authorization.startTime}}<span class="margin-right-sm margin-left-sm">至</span>{{authorization.endTime}}</span>
                    </div>
                    <div class="margin-tb-lg text-df">
                        <span>IP授权</span>
                        <el-table class="po-ab-min" :data="authorization.list" style="width:180px" >
                            <el-table-column label="序号" align="center" prop="num" width="90" />
                            <el-table-column label="IP地址" align="center" prop="userIp" width="90" />
                        </el-table>
                    </div> -->
                </div>
            </div>
            <div  class="fl padding-xl grid.col-2" style="width: 50%;">
                <h3 class="text-xl">产品功能授权信息</h3>
                <div v-if="isActivate">
                  <template v-for="func in authorization.licenseInfo.functionList">
                    <div class="margin-tb-lg text-df">
                      <span>{{func.productName+"("+func.productVersion+")"}}</span>
                      <span v-if="func.authType==0">时间无限制</span>
                      <span class="po-ab" v-else>
                        {{parseTime(func.authDurationBegin, '{y}-{m}-{d}')}}
                        <span class="margin-right-sm margin-left-sm">至</span>
                        {{parseTime(func.authDurationEnd, '{y}-{m}-{d}')}}
                      </span>
                    </div>
                  </template>
                    <!-- <div class="margin-tb-lg text-df">
                        <span>个人实名授权有效期</span><span class="po-ab">{{authorization.personStart}}<span class="margin-right-sm margin-left-sm">至</span>{{authorization.personEnd}}</span>
                    </div>
                    <div class="margin-tb-lg text-df">
                        <span>企业实名授权有效期</span><span class="po-ab">时间<span class="margin-right-sm margin-left-sm">至</span>{{}}</span>
                    </div>
                    <div class="margin-tb-lg text-df">
                        <span>个人证书申请授权有效期</span><span class="po-ab">时间<span class="margin-right-sm margin-left-sm">至</span>{{}}</span>
                    </div>
                    <div class="margin-tb-lg text-df">
                        <span>企业证书申请授权有效期</span><span class="po-ab">时间<span class="margin-right-sm margin-left-sm">至</span>{{}}</span>
                    </div>
                    <div class="margin-tb-lg text-df">
                        <span>文件签署授权有效期</span><span
                         class="po-ab">时间<span class="margin-right-sm margin-left-sm">至</span>{{}}</span>
                    </div> -->
                </div>
            </div>
        </div>
        <div v-if="activeIndex==2">
            <div class="fl padding-xl " style="width: 50%; ">
                <h3 class="text-xl">产品授权信息</h3>
                <div v-if="isActivate">
                    <div class="margin-tb-lg text-df">
                        <span>授权已使用天数</span><span class="po-ab-min">{{authorization.licenseConsumptionInfo.used}}</span>
                    </div>
                    <div class="margin-tb-lg text-df">
                        <span>剩余使用天数</span><span class="po-ab-min">{{authorization.licenseConsumptionInfo.remain}}</span>
                    </div>
                </div>
            </div>
            <div  class="fl padding-xl grid.col-2" style="width: 50%;">
                <h3 class="text-xl">产品功能使用情况</h3>
                <div v-if="isActivate">
                  <template v-for="func in authorization.licenseConsumptionInfo.functionList">
                    <div class="margin-tb-lg text-df">
                      <span>{{func.productName+"("+func.productVersion+")"}}</span>
                      <span class="po-ab">{{(func.productQuantityUsed||0)+"/"+func.productQuantity}}</span>
                    </div>
                  </template>
                  <!-- <div class="margin-tb-lg text-df">
                      <span>个人实名次数</span><span class="po-ab">90/110</span>
                  </div>
                  <div class="margin-tb-lg text-df">
                      <span>企业实名次数</span><span class="po-ab">90/110</span>
                  </div>
                  <div class="margin-tb-lg text-df">
                      <span>个人证书申请次数</span><span class="po-ab">90/110</span>
                  </div>
                  <div class="margin-tb-lg text-df">
                      <span>企业证书申请次数</span><span class="po-ab">90/110</span>
                  </div>
                  <div class="margin-tb-lg text-df">
                      <span>文件签署份数</span><span class="po-ab">90/110</span>
                  </div> -->
                </div>
            </div>
        </div>

      <!-- 导入License文件对话框 -->
      <el-dialog :title="uploadLicense.title" :visible.sync="uploadLicense.open" width="400px" append-to-body>
        <el-row>
          <el-col>
            <el-upload ref="uploadLicense" :limit="1" accept="*.*" :headers="uploadLicense.headers"
              :action="uploadLicense.url + '?hbcClientAuthId=' + uploadLicense.hbcClientAuthId" :disabled="uploadLicense.isUploading"
              :on-progress="handleFileUploadProgress"
              :on-success="handleFileSuccess"
              :on-error="handleFileError"
              :auto-upload="false" drag>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>
          </el-col>
        </el-row>
        <div slot="footer" class="dialog-footer">
          <el-button v-preventReClick type="primary" @click="submitFileForm">确 定</el-button>
          <el-button v-preventReClick @click="uploadLicense.open = false">取 消</el-button>
        </div>
      </el-dialog>
    <!-- 结束导入License文件对话框 -->
    </div>
</template>
<script>
import { createClientAuthLicense, updateClientAuthLicense, deleteClientAuthLicense, getClientAuthLicense, getClientAuthLicensePage,
  exportClientAuthLicenseExcel, createOrUpdateCSRFile, queryLicense, queryLicenseConsumption } from "@/api/system/clientAuthLicense";

import {getBaseHeader} from "@/utils/request";

export default {
data(){
 return{
    isActivate:true,//是否激活
    activeIndex: '1',//选择导航菜单的哪一项
    authorization:{//授权信息
        clientIdentify:undefined,
        name:undefined,
        version:undefined,
        startTime:undefined,
        endTime:undefined,
        list:[],//IP授权的表格数据
        personStart:undefined,
        personEnd:undefined,
        //License信息
        licenseInfo:{
          adminIdNumber: "",
          adminName: "",
          authDurationBegin: 0,
          authDurationEnd: 0,
          authIpType: 1,
          authType: 1,
          corporationName: "",
          corporationUscId: "",
          licenseFileCode: "",
          loginMobile: "",
          productName: "",
          productVersion: "",
          saleTicketCode: "",
          ipList:[],
          functionList:[],
        },
        licenseConsumptionInfo:{
          used:0,
          remain:0,
          functionList:[]
        },
        //License消耗量信息，可能查询慢，所以分开查询
        licenseConsumptionInfo:{}
    },
    //查询License
    queryLicense:{
      queryParams:{
        pageNo: 1,
        pageSize: 100
      },
      loading:false,
      licenseList:[],
      licenseTotal:0
    },
    //上传License
    uploadLicense:{
      open: false,
      title: "",
      isUploading: false,
      headers: getBaseHeader(),
      url: process.env.VUE_APP_BASE_API + '/admin-api/system/client-auth-license/import-license',
    }
 }
},
created() {
  this.getListLicense();
  this.queryLicenseConsumption();
},
methods:{
    handleSelect(key, keyPath) {
        this.activeIndex=key
        console.log(key, keyPath,'----');
      },
       // 上传成功的函数
     handleSuccess(res) {
      if(res.code === 0){
        //this.videoUrl = res.data;
        //this.$emit("input", this.videoUrl);
        console.log(res,'res----')
      }else{
        this.uploadFlag = false;
        this.$message.error("错误！"+ res.msg);
      }
    },
    //===
    // XXX TODO 生成机器码交换文件，这个文件发给服务端，服务端根据这个文件下发license文件
    createCSRFile(){
      console.log("createCSRFile");
      createOrUpdateCSRFile()
      .then(response => {
          this.$download.download0(response, `request.txt`, "text/plain");
      });
      //.catch(() => {});
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.uploadLicense.submit();
    },
    uploadLicenseFile(){
      this.uploadLicense.title = "导入License信息";
      this.uploadLicense.open = true;
    },
    // 读取license信息
    getListLicense(){
      console.log("getListLicense");
      this.queryLicense.loading = true;
      // 执行查询
      queryLicense().then(response => {
        this.queryLicense.loading = false;
        this.authorization.licenseInfo = response.data.licenseInfo != null?response.data.licenseInfo: {};
      });
    },
    // 读取License使用量信息
    queryLicenseConsumption(){
      console.log("queryLicenseConsumption");
      this.queryLicense.loading = true;
      // 执行查询
      queryLicenseConsumption().then(response => {
        this.queryLicense.loading = false;
        console.log("response.data",response.data);
        this.authorization.licenseConsumptionInfo = response.data.licenseConsumptionInfo != null?response.data.licenseConsumptionInfo: {};
      });
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.uploadLicense.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      if (response.code !== 0) {
        this.$modal.msgError(response.msg);
        // XXX  TODO 可能是文件解析错误或者格式或者字段缺失等业务错误，这里跳过重传
        this.uploadLicense.open = false;
        this.uploadLicense.isUploading = false;
        this.$refs.uploadLicense.clearFiles();
        return;
      }
      this.getListLicense();
      this.uploadLicense.open = false;
      this.uploadLicense.isUploading = false;
      this.$refs.uploadLicense.clearFiles();
      // 拼接提示语
      let data = response.data;
      let text = '导入成功!'; // +JSON.stringify(response.data);
      this.$alert(text, "导入", { dangerouslyUseHTMLString: true });
    },
    // 文件上传失败处理
    handleFileError(error, file, fileList){
      this.$modal.msgError(error);
      // XXX TODO 正常的http错误
      this.uploadLicense.open = false;
      this.uploadLicense.isUploading = false;
      this.$refs.uploadLicense.clearFiles();
    },
  }
}
</script>
<style scoped>
.po-ab-min{
    position: absolute;
    left: 16%;
}
.po-ab{
    position: absolute;
    left: 70%;
}
</style>
